<template lang="html">
<div class="product-list">
  <div class="item">
    <div @touchend="showPage" class="a" style="color: black">
      <div class="item-content">
        <div class="title">{{data.title}}
          <span class="warning">{{data.sylx}}</span>
          <span class="success">{{data.xmlx}}</span>
          <span class="danger">{{data.zqlx}}</span>
        </div>
        <div class="sub-item">
          <ul>
            <li>
              <p class="spn">{{data.yqsyl}}</p>
              <p>预计年化率</p>
            </li>
             <li>
              <p class="spn">{{data.tzqx}}</p>
              <p>投资期限</p>
            </li>
             <li>
              <p class="spn">{{data.qtje_title}}</p>
              <p>起头金额</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right-btn">
      <div :class="{
          'dis': !app,
          'dis1': app
      }">
        <img src="/img/images/进行中.png" alt="">
      </div>
      <button :class="{
          'btn': true,
          'data-appointment': app
          }" @click="appointment">
        <div>
          {{app ? '取消预约' : '预约理财师'}}
          <div class="popup-windows"></div>
        </div>
      </button>
    </div>
  </div>
  <mu-container>
    <mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="openAlert">
      预约成功，请保持电话畅通，我们会尽快安排投资经理联系您。
      <mu-button slot="actions" flat color="primary" @click="cancelCloseAlertDialog">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">确定</mu-button>
    </mu-dialog>
    <!-- 取消时的弹框 -->
    <mu-dialog title="提示" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="cancleOpen">
      确定您要取消预约吗
      <mu-button slot="actions" flat color="primary" @click="cancelCloseAlertDialog">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">确定</mu-button>
    </mu-dialog>
  </mu-container>
  <Alert :data="alert"></Alert>
</div>
</template>

<script lang="js">
//引入头部提示框组件
import Alert from '../components/Alert';
let errorAlert = {
    show: true,
    iconType: 'check_circle',
    text: '取消预约成功',
    color: 'success'
  }
let successAlert = {
      show: true,
      iconType: 'check_circle',
      text: '预约成功',
      color: 'success'
    };
  export default  {
    //注册
    components: { Alert },
    name: 'product-list',
    props: ['data'],
    mounted () {

    },
    data () {
      return {
        //判断按钮状态
        app: '',
        //预约的弹框
        openAlert: false,
        //取消的弹框
        cancleOpen: false,
        //弹框相关属性
        alert: {
          // 弹框是否显示
          show: false,
          // 弹框类型
          iconType: 'warning',
          // 弹框显示文字
          text: '',
          // 弹框颜色
          color: 'error'
        }
      }
    },
    //组件创建完成
    created() {
      this.hasData();
    },
    methods: {
      //添加预约理财师传递数据
      appointment() {
        //向this.data中添加app属性
        this.$set(this.data, 'app', !this.app);
        //app为false 还没有预约的时候
          if(!this.app) {
            //出现预约弹框
            this.openAlert = true;
          } else {
            //出现取消预约
            this.cancleOpen = true;
          }
      },
      // 判断按钮的上传和删除数据
      hasData() {
        //判断是否预约  设置按钮状态
         if(this.$store.state.product.find(item => item.id === this.data.id)) {
          this.app = true;
        }
      },
      // 跳转页面
      showPage() {
        //跳转相应的详情页
        this.$router.push('/detail/' + this.data.id);
      },
      //弹框确定效果
      closeAlertDialog () {
        this.openAlert = false;
        this.cancleOpen = false;
        // 成功
          if( !this.app ) {
            // 弹框显示成功信息
            successAlert.show = true;
            this.alert = successAlert;
            
            // 三秒后关闭
            this.timeCloseAlert();
            // 发送验证码失败
          }else{
              // 改变提示信息
              errorAlert.text = "取消预约成功"
              console.log(111)
              // 提示用户
              this.alert = errorAlert;
              // 三秒后关闭
              this.timeCloseAlert();
          }
            //同步传递
            this.$store.commit(this.app ? "subAppointmentData" : "addAppointmentData", this.data)
            //改变app的状态
            this.app = !this.app;
      },
      //弹框取消效果
      cancelCloseAlertDialog() {
        this.openAlert = false;
        this.cancleOpen = false;
      },
      //定时器 取消顶部弹框
      timeCloseAlert() {
        setTimeout(() => {
          this.alert.show = false;
        }, 2000);
      }
    },
    computed: {

    },
    //监听
    watch:{
      
      // 监听路由变化
      $route() {
        // 获取数据
        this.appointment()
      }
    }
}


</script>

<style lang="scss">
  .product-list {
    height: 128px;
    width: 100%;
    padding: 10px 0 20px;
    border-bottom: 1px solid #333;
      .item {
        padding: 0 16px;
        display: flex;
         .a{
           
           width: 80%;
          .item-content {
            .title {
              font-size: 14px;
              .warning {
                display: inline-block;
                padding: 0 6px;
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                border-radius: 4px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                white-space: nowrap;
                background-color: rgba(230,162,60,.1);
                border-color: rgba(230,162,60,.2);
                color: #e6a23c;
              }
              .success {
                display: inline-block;
                padding: 0 6px;
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                border-radius: 4px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                white-space: nowrap;
                background-color: rgba(103,194,58,.1);
                border-color: rgba(103,194,58,.2);
                color: #67c23a;
              }
              .danger {
                display: inline-block;
                padding: 0 6px;
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                border-radius: 4px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                white-space: nowrap;
                background-color: hsla(0,87%,69%,.1);
                border-color: hsla(0,87%,69%,.2);
                color: #f56c6c;
              }
            }
            .sub-item {
              ul {
                display: flex;
                list-style: none;
                font-size: 16px;
                li {
                  text-align: center;
                  margin-right: 15px;
                  color: rgba(0,0,0,.54);
                  .spn {
                    color: red;
                  }
                }
              }
            }
          }
        }
        .right-btn {
          min-width: 56px;
          width: 20%;
          position: relative;
          .dis {
            display: none;
            
          }
          .dis1 {
            position: absolute;
            top: 12px;
            left: 37px;
            width: 30px;
            height: 30px;
            img{
              width: 30px;
              height: 30px;
            }
          }
          .btn {
            background-color: rgb(0, 150, 136);
            user-select: none;
            min-width: auto;
            position: relative;
            top: 60px;
            left: -8px;
            font-size: 13px;
            height: 28px;
            width: 81px;
            color: #fff;
            border-radius: 2px;
            border: none;
            &.data-appointment {
              color: #000;
              background-color: #fff;
            }
          }
        }
      }
    }
    .mu-dialog, .tishi{
        .mu-dialog-body {
          padding: 10px 20px!important;
        }
      }
</style>
